<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useUserStore } from '@/store';
  import useLoading from '@/hooks/loading';
  import dayjs from 'dayjs';

  const modalVisible = ref(false);
  const userStore = useUserStore();
  const detail = ref<any>({});
  const users = ref<any>([]);
  const roles = ref<any>([]);
  const searchForm = ref<any>({});
  const { loading, setLoading } = useLoading(false);

  onMounted(async () => {
    users.value = await userStore.getUsers();
    roles.value = await userStore.getRoles();
  });

  async function fetchUsers() {
    setLoading(true);
    users.value = await userStore.getUsers(searchForm.value);
    setLoading(false);
  }

  async function handleRemove(record: any) {
    await userStore.deleteUser({ id: record.id });
    await fetchUsers();
  }

  function handleAdd() {
    detail.value = {};
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    detail.value = record;
    modalVisible.value = true;
  }

  async function handleSave() {
    await userStore.saveUser(detail.value);
    await fetchUsers();
    modalVisible.value = false;
  }

  async function handleSearch() {
    await fetchUsers();
  }

  async function handleReset() {
    searchForm.value = {};
    await fetchUsers();
  }

  function handleMonthPicker(date: any) {
    searchForm.value.createdAt = [dayjs(date).startOf('month'), dayjs(date).endOf('month')];
  }
</script>

<template>
  <div class="container">
    <breadcrumb :items="['menu.user.management', 'menu.user.list']" />
    <a-card>
      <a-row :gutter="16" :wrap="false">
        <a-col flex="auto" style="padding-right: 16px">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="用户账号">
                <a-input placeholder="请输入用户账号" v-model="searchForm.username"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="真实姓名">
                <a-input placeholder="请输入用户的真实姓名" v-model="searchForm.realName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="联系电话">
                <a-input placeholder="请输入用户的联系电话" v-model="searchForm.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="用户角色" style="margin-bottom: 0">
                <a-select placeholder="请选择用户的角色" v-model="searchForm.roleId">
                  <a-option value="1">管理员</a-option>
                  <a-option value="2">财务</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="创建时间" style="margin-bottom: 0">
                <a-month-picker style="width: 100%" @change="handleMonthPicker"></a-month-picker>
                <!-- <a-range-picker v-model="searchForm.createdAt" style="width: 100%" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" format="YYYY-MM-DD HH:mm" /> -->
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="60px" style="border-left: 1px solid #e5e6eb; padding-left: 16px">
          <a-space direction="vertical" :size="16">
            <a-button type="primary" @click="handleSearch()">搜索</a-button>
            <a-button type="primary" @click="handleReset()">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider margin="16px"></a-divider>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd" size="small">新增</a-button>
      <a-table :data="users" :loading="loading">
        <template #columns>
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="用户角色" data-index="roleId">
            <template #cell="{ record }">
              <a-space wrap>
                <a-tag color="blue" v-for="role in record.roles" bordered>{{ role.name }}</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="用户账号" data-index="username"></a-table-column>
          <a-table-column title="真实姓名" data-index="realName"></a-table-column>
          <a-table-column title="联系电话" data-index="phone"></a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="200"></a-table-column>
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)" size="small">编辑</a-button>
                <a-popconfirm content="您确认移除么?" @ok="handleRemove(record)">
                  <a-button type="primary" status="danger" size="small">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" :title="detail.id ? '编辑用户' : '新增用户'" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="用户角色" required>
          <a-select placeholder="请选择角色" v-model="detail.roles" value-key="id" multiple>
            <a-option :value="role" v-for="role in roles">{{ role.name }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="用户账号" required>
          <a-input v-model="detail.username"></a-input>
        </a-form-item>
        <a-form-item label="用户密码" required>
          <a-input v-model="detail.password"></a-input>
        </a-form-item>
        <a-form-item label="真实姓名" required>
          <a-input v-model="detail.realName"></a-input>
        </a-form-item>
        <a-form-item label="手机号码" required>
          <a-input v-model="detail.phone"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 16px;
  }
</style>
